<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>CSS文字超出元素省略，单行、多行省略</title>
  <style>
    .box {
      width: 500px;
      padding: 0 10px;
      border: 1px solid red;
      border-radius: 5px;
      line-height: 1.5;
    }

    /* 
      (1) overflow：hidden的普通用法：用在块级元素（例如div）的外层隐藏内部溢出元素
      (2) text-overflow: ellipsis; 这一属性依赖于overflow: hidden存在，只有设置了overflow:hidden它才是能够生效的，你可以把它看作overflow对于文本溢出隐藏的一种‘特殊样式’
      (3) white-space: nowrap; 它的作用是让文本不换行
      (4) display: -webkit-box; 对象作为弹性伸缩盒子模型显示 
      (5) -webkit-line-clamp: 2; 溢出省略的界限 用来限制在一个块元素显示的文本的行数，2 表示最多显示 2 行。为了实现该效果，它需要组合其他的 WebKit 属性
      (6) -webkit-box-orient: vertical;设置或检索伸缩盒对象的子元素的排列方式 
    */

    .singe-line {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }

    .double-line {
      overflow: hidden;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    .three-line {
      overflow: hidden;
      word-break: break-all;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
    }

    .assign-line {
      height: 50px;
      word-break: break-all;
    }
  </style>
</head>

<body>
  <div>
    <h3>单行省略</h3>
    <div class="box singe-line">
      ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of
      making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few
      exceptions:
    </div>
  </div>

  <div>
    <h3>两行省略</h3>
    <div class="box double-line">
      vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的
      vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。
    </div>
  </div>

  <div>
    <h3>三行省略</h3>
    <div class="box three-line">
      ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of
      making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few
      exceptions:
    </div>
  </div>

  <div>
    <h3>字符串截取省略</h3>
    <div class="box assign-line">
      ESLint is a tool for identifying and reporting on patterns found in ECMAScript/J ...
    </div>
    <div class="box assign-line">
      vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-serv...
    </div>
  </div>

  <script>
    let content = 'ESLint is a tool for identifying and reporting on patterns found in ECMAScript/JavaScript code, with the goal of making code more consistent and avoiding bugs. In many ways, it is similar to JSLint and JSHint with a few exceptions:';
    let content2 = 'vue.config.js 是一个可选的配置文件，如果项目的 (和 package.json 同级的) 根目录中存在这个文件，那么它会被 @vue/cli-service 自动加载。你也可以使用 package.json 中的 vue 字段，但是注意这种写法需要你严格遵照 JSON 的格式来写。';
  </script>
</body>

</html>